<template>
<div>
    //
    <div ref="nextTickRef" v-if="show">我是nexttick111</div>
    <button @click="dian">点击</button>
    //动态组件
    <component :is="tabs" :style="{color:'#fcc'}"></component>
    <button @click="()=>{
        tabs = zizhi
        }">更换动态组建</button>
</div>
</template>
<script setup lang='ts'>
import { ref, shallowRef,nextTick } from "vue";
import Dong from "../views/Dong.vue";
import zizhi from "../views/Zhiling.vue";
const tabs = ref(Dong)
const show = ref(false)
const nextTickRef = shallowRef()
const dian =()=>{
    show.value = !show.value
    //通过nextTick才可以获取到
    // 当你更改数据时，视图的更新是异步的。nextTick 允许你在 DOM 更新后执行代码，从而确保操作的是最新的 DOM 状态
    nextTick(()=>{
        //更新之后的dom 获取最新状态
         console.log(show.value?nextTickRef.value.innerText:'');
    })
    //这样写的话读取不到页面的内容
    // 错误的 console.log(show.value?nextTickRef.value.innerText:'');

}
//更换动态组件的的is

</script>


<style lang='scss'>

</style>
